import React, { PureComponent } from 'react';
import echarts from 'echarts/dist/echarts.js';
// import 'echarts/lib/chart/line';
// import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/candlestick';
// import 'echarts/lib/chart/effectScatter';
// import 'echarts/lib/component/grid';
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/markLine';
// import 'echarts/lib/component/markPoint';
// import 'echarts/lib/component/title';
// import 'echarts/lib/component/dataZoom';
// import 'echarts/lib/component/markArea';
// import 'echarts/lib/component/legend';

let myChart;

class Echarts extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  setOption(data) {
    const list = data;
    const dataSource = {
      date: [],
      growth: [],
      fundpercent: [],
      spypercent: [],
      exceed: [],
    };
    for (let i = 0; i < list.length; i++) {
      const item = list[i];
      // @ts-ignore
      dataSource.date.push(item.date);
      // @ts-ignore
      // dataSource.growth.push(item.netBoost);
      // @ts-ignore
      dataSource.fundpercent.push(item.marketValue);
      // @ts-ignore
      // dataSource.spypercent.push(item.spyNetValue);
      // @ts-ignore
      // dataSource.exceed.push(parseFloat(
      //   (item.fundNetValue - item.spyNetValue).toFixed(
      //     6
      //   ))
      // )
      /*   {
              value: ((item.fundpercent - item.spypercent).toFixed(6)),
          itemStyle: {

              color:((item.fundpercent - item.spypercent) > 0 ? 'green' : 'green')
          },
  } */
    }
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        // formatter(params) {
        //   let result = params[0].name;
        //   let infex = 0;
        //   params.forEach(function(item) {
        //     infex += 1;
        //     result += '<br/>';
        //     if (item.seriesName === '超额收益') {
        //       if (item.value > 0) {
        //         result +=
        //           '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
        //           'rgba(138,188,80,0.3)' +
        //           '"></span>';
        //       } else {
        //         result +=
        //           '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
        //           'rgba(222,44,84,0.3)' +
        //           '"></span>';
        //       }
        //     } else if (item.seriesName === '差值') {
        //       result +=
        //         '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
        //         '#999999' +
        //         '"></span>';
        //     } else if (item.seriesName === '三号') {
        //       result +=
        //         '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
        //         '#4e81bd' +
        //         '"></span>';
        //     } else if (item.seriesName === 'SPY') {
        //       result +=
        //         '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
        //         '#c1504c' +
        //         '"></span>';
        //     }
        //
        //     result += `${item.seriesName}：`;
        //
        //     if (item.seriesName === '超额收益') {
        //       result += isNaN(item.value) ? 0 : `${window.mathService.mul(item.value, 100)}%`;
        //     } else if (item.seriesName === '差值') {
        //       result += item.value;
        //     } else if (item.seriesName === '三号') {
        //       result += item.value;
        //     } else if (item.seriesName === 'SPY') {
        //       result += item.value;
        //     }
        //   });
        //   return result;
        // },
      },
      grid: {
        width: '90%',
        left: '6%',
        // left:'10%'
        // right:'1%'
      },
      // toolbox: {
      //   feature: {
      //     dataView: {
      //       show: true,
      //       readOnly: false
      //     },
      //     magicType: {
      //       show: true,
      //       type: ['line', 'bar']
      //     },
      //     restore: {
      //       show: true
      //     },
      //     saveAsImage: {
      //       show: true
      //     }
      //   }
      // },
      // legend: {
      //   selected: {},
      //   data: [
      //     { name: '三号', icon: 'roundRect' },
      //     { name: 'SPY', icon: 'roundRect' },
      //     { name: '超额收益', icon: 'roundRect' },
      //     { name: '差值', icon: 'roundRect' },
      //   ],
      // },
      xAxis: [
        {
          type: 'category',
          data: dataSource.date,
          axisTick: {
            show: false,
          },
          axisLabel: {
            showMaxLabel: true,
            // normal
            color: '#333333',
            showMinLabel: true,
            fontSize: 13,
            padding: [10, 4, 10, 4],
          },

          // boundaryGap: ['20%', '20%'],
          axisLine: {
            lineStyle: {
              color: 'rgba(155,155,155,0.7)',
              width: 1,
              type: 'dashed',
            },
          },
          position: 'bottom',
          // splitNumber:8,
        },
      ],
      yAxis:
        [{
          type: 'value',
          // max(value) {
          //   return (value.max + 0.01).toFixed(2);
          // },
          // min(value) {
          //   return (value.min - 0.01).toFixed(2);
          // },
          // interval:0.02,
          // axisLabel: {
          //   formatter(value, index) {
          //     return `${(value * 100).toFixed(1)}%`;
          //   },
          //   fontSize: 13,
          //   color: '#333333',
          // },
          position:'left',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(155,155,155,0.7)',
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(151,151,151,0.2)',
              type: 'dashed',
            },
          },
        },
          {
            type: 'value',
            // max(value) {
            //   return (value.max + 0.01).toFixed(2);
            // },
            // min(value) {
            //   return (value.min - 0.01).toFixed(2);
            // },
            // interval:0.02,
            // axisLabel: {
            //   formatter(value, index) {
            //     return `${(value * 100).toFixed(1)}%`;
            //   },
            //   fontSize: 13,
            //   color: '#333333',
            // },
            position:'right',
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(155,155,155,0.7)',
                width: 2,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(151,151,151,0.2)',
                type: 'dashed',
              },
            },
          },
        ],
        // {
        //   type: 'value',
        //   max(value) {
        //     return (value.max + 0.1).toFixed(1);
        //   },
        //   min(value) {
        //     return (value.min - 0.1).toFixed(1);
        //   },
        //   axisLabel: {
        //     formatter: '{value}',
        //     fontSize: 13,
        //     color: '#333333',
        //   },
        //   axisLine: {
        //     show: false,
        //
        //     lineStyle: {
        //       color: 'rgba(155,155,155,0.7)',
        //       width: 2,
        //     },
        //   },
        //   axisTick: {
        //     show: false,
        //   },
        //   splitLine: {
        //     lineStyle: {
        //       color: 'rgba(151,151,151,0.15)',
        //       type: 'dashed',
        //     },
        //   },
        // },
        // {
        //   type: 'value',
        //   show: false,
        //   max(value) {
        //     return (value.max + 0.1).toFixed(1);
        //   },
        //   min(value) {
        //     return (value.min - 0.1).toFixed(1);
        //   },
        //   axisLabel: {
        //     formatter: '{value}',
        //     color: '#333333',
        //   },
        //   axisLine: {
        //     show: false,
        //     lineStyle: {
        //       color: 'rgba(155,155,155,0.7)',
        //       width: 2,
        //     },
        //   },
        //   axisTick: {
        //     show: false,
        //   },
        //   splitLine: {
        //     lineStyle: {
        //       color: 'rgba(151,151,151,0.1)',
        //       type: 'dashed',
        //     },
        //   },
        // },

      dataZoom: [
        {
          show: true,
          xAxisIndex: 0,
          type: 'inside',
          start: 0,
          end: 100,
          // minValueSpan: 10,
        },
      ],
      series: [
        // {
        //   name: '超额收益',
        //   type: 'bar',
        //   yAxisIndex: 0,
        //   label: {
        //     formatter(params) {
        //       return `${(params.data * 100).toFixed(4)}%`;
        //     },
        //   },
        //   itemStyle: {
        //     normal: {
        //       color(value) {
        //         return parseFloat(value.data) > 0 ? 'rgba(138,188,80,0.3)' : 'rgba(222,44,84,0.3)';
        //       },
        //     },
        //   },
        //   data: dataSource.growth,
        // },

        // {
        //   name: '差值',
        //   type: 'line',
        //   yAxisIndex: 2,
        //   showSymbol: false,
        //   itemStyle: {
        //     normal: {
        //       color: '#999999',
        //     },
        //   },
        //   lineStyle: {
        //     width: 1.5,
        //   },
        //   data: dataSource.exceed,
        // },
        {
          name: '市值',
          type: 'line',
          showSymbol: false,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: '#4e81bd',
            },
          },
          lineStyle: {
            width: 1.5,
          },
          data: dataSource.fundpercent,
        },
        // {
        //   name: 'SPY',
        //   type: 'line',
        //   yAxisIndex: 1,
        //   showSymbol: false,
        //   itemStyle: {
        //     normal: {
        //       color: '#c1504c',
        //     },
        //   },
        //   lineStyle: {
        //     width: 1.5,
        //   },
        //   data: dataSource.spypercent,
        // },
      ],
    };

    myChart.setOption(option, true);
  }

  render() {
    const { mainId } = this.props;
    return (
      <div>
        <div id={mainId} style={{ width: '100%', height: 666 }} />
      </div>
    );
  }
  /* <div className={styles.entranceBox}> */

  componentDidMount() {
    const { data, mainId, symbol } = this.props;
    // @ts-ignore
    const main = document.getElementById(mainId);
    myChart = echarts.init(main, '', { renderer: 'svg' });
    this.setOption(data);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }

  componentWillUnmount() {
    // const {dispatch} = this.props;
    // dispatch({
    //   type: 'en/OutGroupFu',
    // });
    myChart.clear();
    myChart.dispose();
  }
}

export default Echarts;
